import { View } from "@tarojs/components";
import { CategoryTag, Paragraph, PriceView, WrappingText } from "@/components";
import style from "./index.module.scss";
import { CagegoryTagProps } from "../basic/CategoryTag";
import { PriceTextProps } from "../basic/PriceView";
import { DateShape } from "@/data/shared/timeTypes";
import { formatDateString } from "@/utils";

type MainTitleAreaProps = Omit<CagegoryTagProps, "size"> &
  Omit<PriceTextProps, "type"> & {
    heading: string;
    description: string;
    dateRange?: never;
  };

// Special design for ExhibitionDetail
type MainTitleExhibitionData = {
  heading: string;
  dateRange?: {
    start: `${DateShape}`;
    end: `${DateShape}`;
  };
  themeColor: string;
  price: number | string | null;
  categoryName?: never;
  description?: never;
};

const C07MainTitleArea = ({
  categoryName,
  themeColor,
  price,
  dateRange,
  heading,
  description,
}: MainTitleAreaProps | MainTitleExhibitionData) => {
  return (
    <>
      <View className="course-heading">
        {categoryName && (
          <View className={style["category-tag-wrapper"]}>
            <CategoryTag categoryName={categoryName} themeColor={themeColor} />
          </View>
        )}
        <View className="heading-l">{heading}</View>
        {price !== undefined && <PriceView type="heading-n" price={price} />}
        {dateRange && (
          <WrappingText color={themeColor} className={style.date}>
            {formatDateString(dateRange.start)} -{" "}
            {formatDateString(dateRange.end)}
          </WrappingText>
        )}
      </View>

      {description && <Paragraph>{description}</Paragraph>}
    </>
  );
};

export default C07MainTitleArea;
